<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- a,1 创建页面结构 -->
    <div id="app">
        <!-- a,3  -->
        <router-link to="/">主页</router-link>
        <router-link to="/product">产品</router-link>
        <!-- a,4 路由的出口 -->
        <router-view></router-view>
    </div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
    // a.5 定义组件
    const Home = {
        template:`<div>
            主页
            <button @click='goTo("/product")'>跳转到产品页面(路径)</button>
            <button @click='goTo("product")'>跳转到产品页面(名称)</button>
            </div>
            `,
        methods:{
            //通过名称跳转
            goTo:function(name){
                this.$router.push(name)
            }
        },    
    }
    const Product = {
        template:`<div>产品</div>`
    }
    //6,定义组件和路由的对应关系
    //注意点:routes 名字不能改
    const routes = [
        {
            path:"/",
            component:Home,
            name:"home" //命名路由
        },
        {
            path:"/product",
            component:Product,
            name:"product" //命名路由
        }
    ]
    // a,7 
    // VueRouter 真正的跟路由
    let router = new VueRouter({
        routes
    })

    // a,2
    let vm = new Vue({
        // a.8 作为配置 传到Vue实例中
        router,
        el:"#app"
    })
</script>
</html>